<!DOCTYPE html>
<html>
    <head>
        <title>部门树结构</title>
        #@head()
        <style>

            .fixed-content{
                position: fixed;
                bottom: 0;
                padding: 10px;
                text-align: right;
                width: 100%;
                background-color: #fff;
                border-top:1px solid #ccc;
            }
        </style>
    </head>

    <body class="gray-bg">
        <div class="wrapper wrapper-content ">
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox ibox-body">
                        <div class="ibox-content">
                            <div class="form-group">
                                <div id="jstree"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="height: 60px;"></div>
        <div class="fixed-content">
            <button type="submit" class="btn btn-success btn-sm" onclick="send()">确认</button>
            <button type="button" class="btn default btn-sm" onclick="closeWindow();">取消</button>
        </div>
    </body>
    #@footer()

    <script type="text/javascript">
        var selectNode = null;

        function send() {
            if (selectNode!=null){
                parent.document.getElementById("deptId").value = selectNode.id;
                parent.document.getElementById("deptName").value = selectNode.text;
                closeWindow();
            }else{
                parent.layer.msg("请选择部门");
            }
        }
        
        function closeWindow(){
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        }
        
        $(function(){
            getTreeData();
        })

        function getTreeData() {
            $.ajax({
                type : "GET",
                url : "../dept/tree",
                success : function(tree) {
                    loadTree(tree);
                }
            });
        }
        var count = 0;
        function loadTree(tree) {
            console.log(tree)

            try {
                var id = parent.document.getElementById("deptId").value;
                if (id!=undefined){
                    count = 0;
                    selected(id,tree)
                }
            }catch (e) {
                console.log(e)
            }

            $('#jstree').jstree({
                'core' : {
                    'data' : tree
                },
                "plugins" : [ "search" ]
            });
            $('#jstree').jstree().open_all();
        }


        function selected(id,tree){
            if (tree == undefined) return;
            if (id == tree.id){
                tree.state.selected = true;
                tree.state.opened = true;
                return;
            }else{
                var array = tree.children;
                for(var i=0;i < array.length;i++){
                    count ++;
                    if (count>1000){
                        break;
                    }
                    selected(id,array[i])
                }
            }
        }

        $('#jstree').on("changed.jstree", function(e, data) {
            console.log(e,data)
            selectNode = data.node;
            if (data.selected == -1) {
                var opt = {
                    query : {
                        deptId : '',
                    }
                }
                $('#exampleTable').bootstrapTable('refresh', opt);
            } else {
                var opt = {
                    query : {
                        deptId : data.selected[0],
                    }
                }
                $('#exampleTable').bootstrapTable('refresh',opt);
            }

        });

    </script>
</html>



